<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <title>个人信息-在线聊天室</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        .top-left-alert {
            position: fixed;
            top: 20px; /* 距离顶部的距离 */
            right: 35%; /* 距离左边的距离 */
            width: 400px;
            z-index: 1000; /* 设置较高的层级，确保 Alert 在其他元素之上 */
        }
    </style>
</head>
<body>
<div class="container-fluid bg-light">
    <div class="row">
        <div class="col-md-5 col-lg-4">
            <div class="card card-hover-shadow">
                <header class="card-header">
                    <div class="card-title">个人信息</div>
                </header>
                <div class="card-body">
                    <ul class="list-group list-group-flush text-center">
                        <li class="list-group-item">
                            <input id="avatar" type="file" style="display:none">
                            <img src="images/qq.png" th:src="${session.user.avatar}" alt="..." title="点击上传头像"
                                 width="100" height="100" class="img-avatar mr-3" id="img">
                            <p style="color: lightgrey; font-size: 12px;margin-top: 5px">注意：头像上传后需要保存才生效</p>
                        </li>
                        <li class="list-group-item">
                            <span class="float-left">用户名称</span>
                            <span class="float-right" th:text="${session.user.username}">zhangsan</span>
                        </li>
                        <li class="list-group-item">
                            <span class="float-left">用户性别</span>
                            <span class="float-right" th:if="${session.user.gender == '0'}">未知</span>
                            <span class="float-right" th:if="${session.user.gender == '1'}">男</span>
                            <span class="float-right" th:if="${session.user.gender == '2'}">女</span>
                        </li>
                        <li class="list-group-item">
                            <span class="float-left">用户邮箱</span>
                            <span class="float-right" th:text="${session.user.email}">123@qq.com</span>
                        </li>
                        <li class="list-group-item">
                            <span class="float-left">用户介绍</span>
                            <span class="float-right"
                                  th:text="${session.user.description}">这个人很赖什么都没留下。</span>
                        </li>
                        <li class="list-group-item">
                            <span class="float-left">加入时间</span>
                            <span class="float-right" th:text="${session.user.createTime}">2024-09-10</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="card">
                <header class="card-header">
                    <div class="card-title">基本资料</div>
                </header>
                <div class="card-body">
                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#profile">个人信息</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#password">修改密码</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <!-- 修改个人信息表单-->
                        <div class="tab-pane fade show active mt-2" id="profile">
                            <form method="post" action="#" class="site-form">
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="realName">真实姓名</label>
                                        <input type="text" class="form-control" name="realName" id="realName"
                                               placeholder="输入您的真实姓名" value="张三"
                                               th:value="${session.user.realName}">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="gender">用户性别</label>
                                        <select id="gender" name="gender" class="form-control">
                                            <option th:selected="${session.user.gender == '1' ? true : false}" value="1"
                                                    selected>
                                                男
                                            </option>
                                            <option th:selected="${session.user.gender == '2' ? true : false}" value="2">女
                                            </option>
                                            <option th:selected="${session.user.gender == '0' ? true : false}" value="0">
                                                未知
                                            </option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="email">用户邮箱</label>
                                        <input type="email" class="form-control" name="email" id="email"
                                               aria-describedby="emailHelp" placeholder="请输入正确的邮箱地址"
                                               value="123456789@qq.com" th:value="${session.user.email}">
                                        <small id="emailHelp"
                                               class="form-text text-muted">请保证您填写的邮箱地址是正确的。</small>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="phone">用户手机</label>
                                        <input type="text" class="form-control" name="phone" id="phone"
                                               placeholder="输入您的手机" value="18888888888"
                                               th:value="${session.user.phone}">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="address">用户地址</label>
                                        <input type="text" class="form-control" name="address" id="address"
                                               placeholder="输入您的地址" value="湖南长沙"
                                               th:value="${session.user.address}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="description">用户简介</label>
                                    <textarea class="form-control" name="description" id="description" rows="3"
                                              th:text="${session.user.description}"></textarea>
                                </div>
                                <input type="hidden" name="id" th:value="${session.user.id}"/>
                                <input type="hidden" name="avatar" th:value="${session.user.avatar}"/>
                                <button type="button" class="btn btn-outline-secondary" onclick="window.history.back()">返回</button>
                                <button type="reset" class="btn btn-secondary">重置</button>
                                <button type="button" class="btn btn-primary ml-4" id="save_profile">保存</button>
                            </form>
                        </div>

                        <!-- 修改密码表单 -->
                        <div class="tab-pane fade mt-2" id="password">
                            <form method="post" action="#!" class="site-form">
                                <div class="form-group">
                                    <label for="old-password">旧密码</label>
                                    <input type="password" class="form-control" name="oldPwd" id="old-password"
                                           placeholder="输入账号的原登录密码">
                                </div>
                                <div class="form-group">
                                    <label for="new-password">新密码</label>
                                    <input type="password" class="form-control" name="newPwd" id="new-password"
                                           placeholder="输入新的密码">
                                </div>
                                <div class="form-group">
                                    <label for="confirm-password">确认新密码</label>
                                    <input type="password" class="form-control" name="confirmpwd" id="confirm-password"
                                           placeholder="请输入正确的新密码">
                                </div>
                                    <p style="color: lightgrey;font-size: 12px">注意：密码修改后将在下次登录生效</p>
                                <button type="reset" class="btn btn-secondary">重置</button>
                                <button type="button" class="btn btn-primary ml-4" id="save_password">修改密码</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="js/common.js"></script>
<script>
    $(function () {
        // 修改个人信息
        $("#save_profile").click(function () {
            let realName = $("#realName");
            let sex = $("#sex");
            let email = $("#email");
            let remark = $("#remark");

            if (realName.val() == "") {
                notice("danger", "请输入真实姓名");
                realName.focus();
            } else if (sex.val() == "") {
                notice("danger", "请选择性别");
                sex.focus();
            } else if (email.val() == "") {
                notice("danger", "请输入邮箱");
                email.focus();
            } else if (remark.val() == "") {
                notice("danger", "请输入简介");
                remark.focus();
            } else {
                let formData = $("form:eq(0)").serializeArray();
                console.log(formData);

                $.post('/user/update-profile', formData, function (res) {
                    if (res.code == 200) {
                        notice("success", res.message + "请刷新页面！");
                    } else {
                        notice("danger", res.message);
                    }
                });
            }
        })

        // 修改密码
        $("#save_password").click(function () {
            var oldpwd = $("#old-password");
            var newpwd = $("#new-password");
            var confirmpwd = $("#confirm-password");
            if (oldpwd.val() == "") {
                notice("danger", "请输入旧密码");
                oldpwd.focus();
            } else if (newpwd.val() == "") {
                notice('danger', "请输入新密码");
                newpwd.focus();
            }else if(newpwd.val() == oldpwd.val()){
                notice('danger', "新密码不能与旧密码相同");
                newpwd.focus();
            } else if (confirmpwd.val() == "") {
                notice('danger', "请输入确认密码");
                confirmpwd.focus();
            } else if (newpwd.val() != confirmpwd.val()) {
                notice('danger', "两次密码输入不一致");
                confirmpwd.focus();
            } else {
                let formData = {oldPwd: oldpwd.val(), newPwd: newpwd.val()};
                $.post('/user/update-password', formData, function (res) {
                    if (res.code !== 200) {
                        notice("danger", res.message);
                    } else {
                        notice("success", res.message);
                    }
                });
            }
        })

        // 点击图片触发图片上传
        $("#img").click(function () {
            $("#avatar").click();
        })

        // 图片上传
        $("#avatar").change(function () {
            let formData = new FormData();
            formData.append("file", $("#avatar")[0].files[0]);
            $.ajax({
                type: "POST",
                url: "/file/upload",
                data: formData,
                dataType: "text",
                processData: false,  // 告诉jquery不要去处理请求的数据格式
                contentType: false,  // 告诉jquery不要设置请求头的类型
                success: function (res) {
                    res = JSON.parse(res);
                    if (res.code !== 200) {
                        notice("danger", res.message)
                    } else {
                        notice("success", res.message)
                        $("#img").attr("src", res.data);
                        $("[name='avatar']").val(res.data);
                    }
                }
            });
        })
    })
</script>
</body>
</html>